import React, { useEffect, useRef } from 'react';
import G6 from '@antv/g6';

const PushLocus = () => {
  const containerRef = useRef(null);
  useEffect(() => {
    if (!containerRef.current) return;

    /**
     * 自定义边
     */
    G6.registerEdge('line-dash', {
      draw(cfg: any, group: any) {
        const startPoint = cfg.startPoint;
        const endPoint = cfg.endPoint;
        const shape = group.addShape('path', {
          attrs: {
            // 边的颜色
            stroke: '#44d7b6',
            // 将边线设置为实线长度为 5，空白长度为 5 的虚线
            lineDash: [5, 5],
            // 末尾端的箭头，为true时的箭头效果
            endArrow: {
              path: 'M 0,0 L 8,4 L 8,-4 Z',
              fill: '#44d7b6', // 箭头填充色
              arrowSolid: true, // 箭头是否实心
            },
            // 绘制边的路径
            path: [
              ['M', startPoint.x, startPoint.y + 14],
              ['L', startPoint.x, (startPoint.y + endPoint.y) / 2],
              ['L', endPoint.x, (startPoint.y + endPoint.y) / 2],
              ['L', endPoint.x, endPoint.y],
            ],
          },
        });
        return shape;
      },
    });

    const graph = new G6.TreeGraph({
      container: containerRef.current,
      width: 1400,
      height: 640,
      modes: {
        default: ['drag-canvas', 'zoom-canvas'],
      },
      fitView: true,
      fitCenter: true,
      // 默认状态下节点的配置
      defaultNode: {
        // 设置节点为图片
        type: 'image',
        size: [40, 40], // 节点大小
        // 指定连入节点的连接点位置
        anchorPoints: [
          [0.5, 0],
          [0.5, 1],
        ],
      },
      // 默认状态下边的配置
      defaultEdge: {
        type: 'line-dash',
        // 边节点的像素大小
        size: 1,
      },
      layout: {
        type: 'compactBox',
        // 上下布局
        direction: 'TB',
        getId: function getId(d) {
          return d.id;
        },
        getHeight: function getHeight() {
          return 6;
        },
        getWidth: function getWidth() {
          return 16;
        },
        getVGap: function getVGap() {
          return 40;
        },
        getHGap: function getHGap() {
          return 70;
        },
      },
    });

    const data = {
      id: 'node1',
      label: '渠道网关层',
      rectFill: '#C6E5FF',
      rectStroke: '#5B8FF9',
      textFill: '#00BFFF',
      img: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ',
      labelCfg: {
        position: 'bottom', // 设置节点文字在节点下方
      },
      children: [
        {
          id: 'node1-1',
          label: '会话编排',
          rectFill: '#32c5ff1a',
          rectStroke: '#32c5ff',
          textFill: '#32c5ff',
          children: [
            {
              id: 'node1-1-1',
              label: '业务路由01',
              rectFill: '#32c5ff1a',
              rectStroke: '#32c5ff',
              textFill: '#32c5ff',
              children: [
                {
                  id: 'node1-1-1-1',
                  label: '领域服务01',
                  rectFill: '#32c5ff1a',
                  rectStroke: '#32c5ff',
                  textFill: '#32c5ff',
                  children: [
                    {
                      id: 'node1-1-1-1-1',
                      label: '交易服务01',
                      rectFill: '#32c5ff1a',
                      rectStroke: '#32c5ff',
                      textFill: '#32c5ff',
                      children: [
                        {
                          id: 'node1-1-1-1-1-1',
                          label: '产品服务01',
                          rectFill: '#32c5ff1a',
                          rectStroke: '#32c5ff',
                          textFill: '#32c5ff',
                        },
                        {
                          id: 'node1-1-1-1-1-2',
                          label: '产品服务02',
                          rectFill: '#32c5ff1a',
                          rectStroke: '#32c5ff',
                          textFill: '#32c5ff',
                        },
                      ],
                    },
                  ],
                },
                {
                  id: 'node1-1-1-2',
                  label: '领域服务02',
                  rectFill: '#32c5ff1a',
                  rectStroke: '#32c5ff',
                  textFill: '#32c5ff',
                  children: [
                    {
                      id: 'node1-1-1-2-1',
                      label: '交易服务02',
                      rectFill: '#32c5ff1a',
                      rectStroke: '#32c5ff',
                      textFill: '#32c5ff',
                      children: [
                        {
                          id: 'node1-1-1-2-1-1',
                          label: '产品服务03',
                          rectFill: '#32c5ff1a',
                          rectStroke: '#32c5ff',
                          textFill: '#32c5ff',
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          id: 'node2-1',
          label: '业务路由02',
          rectFill: '#32c5ff1a',
          rectStroke: '#32c5ff',
          textFill: '#32c5ff',
          children: [
            {
              id: 'node2-1-1',
              label: '领域服务03',
              rectFill: '#32c5ff1a',
              rectStroke: '#32c5ff',
              textFill: '#32c5ff',
              children: [
                {
                  id: 'node2-1-1-1',
                  label: '交易服务03',
                  rectFill: '#32c5ff1a',
                  rectStroke: '#32c5ff',
                  textFill: '#32c5ff',
                  children: [
                    {
                      id: 'node2-1-1-1-1',
                      label: '产品服务04',
                      rectFill: '#32c5ff1a',
                      rectStroke: '#32c5ff',
                      textFill: '#32c5ff',
                    },
                  ],
                },
              ],
            },
            {
              id: 'node2-1-2',
              label: '领域服务04',
              rectFill: '#32c5ff1a',
              rectStroke: '#32c5ff',
              textFill: '#32c5ff',
              children: [
                {
                  id: 'node2-1-2-1',
                  label: '交易服务04',
                  rectFill: '#32c5ff1a',
                  rectStroke: '#32c5ff',
                  textFill: '#32c5ff',
                  children: [
                    {
                      id: 'node2-1-2-1-1',
                      label: '产品服务05',
                      rectFill: '#32c5ff1a',
                      rectStroke: '#32c5ff',
                      textFill: '#32c5ff',
                    },
                    {
                      id: 'node2-1-2-1-2',
                      label: '产品服务06',
                      rectFill: '#32c5ff1a',
                      rectStroke: '#32c5ff',
                      textFill: '#32c5ff',
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    };

    graph.data(data);
    graph.render();
    graph.stopAnimate();
    graph.fitView();

    return () => {
      graph.destroy();
    };
  }, []);

  return <div ref={containerRef} style={{ height: 500, width: '100%' }} />;
};

export default PushLocus;
